<template>
	<view class="change_city">
		<view class="header" @tap="close_change_city">切换城市</view>
		<view class="positioning">
			<text>自动定位</text>
			<text>{{position_city}}</text>
		</view>
		<view class="hot_city">
			<view class="change_hot_city">抖音热门城市</view>
			<view hover-class="animation_jello_4" hover-start-time="20" hover-stay-time="400" v-for="(item,index) of change_hot_city_list"
			 :key="item.id" @tap="change_city(item.name)">{{item.name}}</view>
		</view>
		<!-- 城市列表 -->
		<scroll-view class="city_list" :scroll-y="true" :scroll-into-view="city_initial">
			<view class="citys" v-for="(item,index) of city" :key="index" :id="item.initial">
				<text>{{item.initial}}</text>
				<text v-for="(value,key) of item.list" :key="key" @tap="change_city(value.name)">{{value.name}}</text>
			</view>
		</scroll-view>
		<!-- 字母表 -->
		<view class="letter" @tap="letter">
			<text :id="item" v-for="(item,index) of letter_list" :key="index">{{item}}</text>
		</view>
	</view>
</template>

<script>
	import Vuex from "vuex";
	import city from '@/static/data/city.js';
	let time = null;
	export default {
		props: {},
		computed: {
			...Vuex.mapState(["position_city"]),
		},
		data() {
			return {
				city,
				city_initial: "A",
				letter_list: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
					"U",
					"V", "W", "X", "Y", "Z"
				],
				change_hot_city_list: [{
					id: "0",
					name: "深圳"
				}, {
					id: "1",
					name: "北京"
				}, {
					id: "2",
					name: "上海"
				}, {
					id: "3",
					name: "成都"
				}, {
					id: "4",
					name: "广州"
				}, {
					id: "5",
					name: "杭州"
				}, {
					id: "6",
					name: "武汉"
				}, {
					id: "7",
					name: "长沙"
				}, {
					id: "8",
					name: "苏州"
				}, {
					id: "9",
					name: "重庆"
				}],
				// 当前触摸的状态
				touch: false,
			};
		},
		methods: {
			...Vuex.mapMutations(["change_position_city"]),
			letter(e) {
				this.city_initial = e.target.id;
			},
			close_change_city() {
				uni.navigateBack();
			},
			// 修改地理位置信息
			change_city(value) {
				// 通过vuex来修改城市
				this.change_position_city(value);
				// 选择城市后3秒开始跳转页面
				let id = setTimeout(() => {
					uni.navigateBack();
					clearTimeout(id);
				}, 0.4 * 1000);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.change_city {
		width: 100%;
		height: 100%;
	}

	.header {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
		font-size: 32rpx;
		color: #FFFFFF;
		padding-top: 50rpx;
		letter-spacing: 4rpx;
		position: relative;

		&::before {
			content: "\e632";
			font-family: "iconfont";
			position: absolute;
			font-size: 36rpx;
			top: 100rpx;
			left: 40rpx;
			transform: translateY(-50%);
			color: #86828E;
		}
	}

	.positioning {
		width: 100%;
		background-color: #222;
		padding: 20rpx 40rpx 40rpx;
		display: flex;
		flex-direction: column;

		text {
			color: #FFFFFF;

			&:first-of-type {
				font-size: 24rpx;
				color: #B9B9C1;

				&::before {
					content: "\e614";
					font-family: "iconfont";
					margin-right: 10rpx;
					color: #43C8E4;
				}
			}

			&:last-of-type {
				font-size: 26rpx;
				margin-top: 25rpx;
				color: #777681;
			}
		}
	}

	// 热门城市
	.hot_city {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background-color: #161723;
		gap: 15rpx;
		padding: 20rpx 40rpx 40rpx 20rpx;

		view {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;

			&:not(.change_hot_city) {
				background-color: #252632;
				text-align: center;
				border-radius: 6rpx;
				color: #7B7C87;
			}
		}

		.change_hot_city {
			grid-column-start: span 3;
			color: #AAABB7;
			font-size: 26rpx;

			&::before {
				content: "\e6b2";
				font-family: "iconfont";
				color: #FA4467;
				margin-right: 10rpx;
			}
		}
	}

	.city_list {
		height: 100%;
		background-color: #161725;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
	}

	.citys {
		display: flex;
		flex-direction: column;

		>text {
			color: #6B6C7B;
			padding: 10rpx 0rpx;

			&:first-of-type {
				font-size: 20rpx;
			}

			// 除了第一个text不添加激活状态外，其它都添加
			&:not(:first-of-type) {
				&:active {
					color: #F3F3F4 !important;
					// background-color: #4B4B50 !important;
				}
			}
		}
	}

	// 字母链表
	.letter {
		position: fixed;
		top: 300rpx;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		width: 40rpx;

		>text {
			display: inline-block;
			color: #FFFFFF;
			height: 45rpx;
			line-height: 45rpx;
			text-align: center;
			transition: 0.15s all linear;

			&:active {
				font-size: 50rpx !important;
			}
		}
	}

	/* 点击动画效果 */
	.animation_jello_4 {
		background-color: #000 !important;
		color: #FFFFFF !important;
		animation: jello;
		animation-duration: .4s;
	}
</style>
